<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="stylesheet" href="../css/bootstrap.css">
    <script type="text/javascript" src="../js/jquery-1.12.4.js"></script>
    <script type="text/javascript" src="../js/bootstrap.js"></script>
    <script type="text/javascript" src="../js/vue-2.6.12.js"></script>
    <script type="text/javascript" src="../js/axios-0.21.0.js"></script>
</head>
<body>
<div id="warp">
    <div class="navbar navbar-default">
        <div class="container">
            <div class="navbar-header">
                <a href="main.html" class="navbar-brand">在线珠宝商城</a>

            </div>
            <span v-if="user !== null" class="navbar-text">欢迎您：<a href="">{{user.userName}}</a></span>
            <ul v-if="user === null" class="nav navbar-nav">
                <li><a href="../login.html" class="navbar-link"><span class="text-primary">登录</span></a></li>
                <li class="divider"></li>
                <li><a href="../register.html" class="navbar-link"><span class="text-primary">注册</span></a></li>
            </ul>
            <ul class="nav navbar-nav" v-if="user !== null">
                <li><a href="#" @click.prevent="logout" class="navbar-link"><span class="text-primary">退出登录</span></a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li>
                    <a href="cart/cart.html">
                        <svg height="15" version="1.1" xmlns="http://www.w3.org/2000/svg"
                             xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                             viewBox="0 0 489 489" style="enable-background:new 0 0 489 489;" xml:space="preserve">
                    </svg>
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <div class="container">
        <div class="row">
            <div class="col-md-4">
                <img class="pull-right" :src="'http://localhost:8080/images/'+product.imageUrl" style="width: 200px;height: 300px;"
                     alt="">
            </div>
            <div class="col-md-8">
                <h3>{{product.productName}}</h3>
                <hr>
                <p>材质：{{product.material}}</p>
                <p>纯度：{{product.purity}}</p>

                <div class="row">
                    <div class="col-md-5">色泽：{{product.color}}</div>
                    <div class="col-md-7">重量：{{product.weight}}</div>
                </div>
                <div class="row">
                    <div class="col-md-5">{{product.craftsmanship}}</div>
                    <div class="col-md-7">认证：{{product.certification}}</div>
                </div>
                <div class="row">
                    <div class="col-md-5">库存仅剩：{{product.stock}}</div>
                    <div class="col-md-7">可刻字：否</div>
                </div>
                <div class="row">
                    <div class="col-md-5">模号：EOF1216</div>
                    <div class="col-md-7">包装：精装</div>
                </div>
                <p>
                    定价：
                    <del>￥{{product.price}}</del>
                    <span style="color:red">折扣价：￥{{product.jprice}}</span> 节省：￥{{product.price - product.jprice}}
                </p>
                <div>
                    <p><a href="cart/cart.html" class="btn btn-danger"
                          @click.prevent="putCart(product.productId)">加入购物车</a></p>
                    <p><a href="wdShoucang.html" class="btn btn-danger"
                          @click.prevent="addshoucang">加入收藏夹</a></p>
                </div>

                <div class="col-md-12">
                    <strong>商品简介</strong>
                    <p class="well">{{product.desc}}</p>
                </div>

                <div class="col-md-12">
                    <strong>商品评价</strong>
                    <div class="panel panel-default">
                        <div class="panel-body">
                            <ul class="media-list" v-for="c in this.comments">
                                <li class="media">
                                    <div class="media-body">
                                        <p class="well">{{c.comment}}</p>
                                    </div>
                                </li>
                                <hr>

                            </ul>
                        </div>
                    </div>

                </div>
            </div>
            <hr>
<!--            <div class="row">-->
<!--                <div class="col-sm-12" style="margin:100px 0">-->
<!--                    <button class="btn" @click="" data-toggle="modal" data-target="#addComment">新增评论-->
<!--                        <span class="glyphicon glyphicon-plus"></span></button>-->
<!--                </div>-->
<!--            </div>-->
        </div>
        <h4></h4>
        <p></p>
    </div>




    <!--增加评论-->
    <div id="addComment" class="modal fade" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title">添加评论</h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal">
                        <div class="form-group">
                            <p style="text-align: center; font-weight: bold;">请放心评论，我们的评论均为匿名评论</p>
                            <div class="col-sm-10">
                                <div class="row">
                                    <label class="col-sm-2 control-label">请输入</label>
                                    <div class="col-sm-10">
                                    <textarea name="comm" class="form-control" id="" rows="3" style="width: 100%;"
                                              v-model="comm.comment">
                                    </textarea>
                                    </div>

                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-offset-2 col-sm-2">
                                <button type="button" @click="addComment" class="btn btn-primary">确定</button>
                            </div>
                            <div class="col-sm-offset-1 col-sm-2">
                                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">

                </div>
            </div><!-- /.modal-content -->
        </div>
    </div>
</div>
<script>
    new Vue({
        el: "#warp",
        data: {
            comm:{
                commentId:null,
                uId:1,
                pid:10,
                comment:""
            },
            index: -1,
            product: {},
            comments:[],
            user: null
        },
        created() {
            this.isLogin();
            let productId = location.search;
            console.log(productId)
            axios.get("/pro/shbyId" + productId)
                .then(resp => {
                    this.product = resp.data;
                    console.log(this.product)
                }).catch(error => {
                console.log(error);
            });
            axios.get("/comm/byId/" + productId)
                .then(resp=>{
                    this.comments = resp.data
                    console.log(this.product)
                }).catch(error => {
                console.log(error);
            });
        },
        methods: {
            logout(){
                axios.get('/user/logout').then(res => {
                    alert('退出成功');
                    location.href = '/front/main.html';
                })
            },
            isLogin() {
                axios.get('/user').then(res => {
                    this.user = res.data.data
                })
            },
            putCart(productId) {
                if (this.user === null) {
                    alert('请先登录！');
                    location.href = '../login.html';
                    return;
                }
                console.log(productId)
                axios.get("/cart/putCart?productId=" + productId)
                location.href = "/front/cart/cart.html"
            },
            addComment(){
                if (this.comm.comment && this.comm.comment.trim() !== "") {
                    const searchParams = new URLSearchParams(window.location.search);
                    let productId = searchParams.get("productId");
                    //console.log(this.comm);
                    this.comm.pid=productId;
                    console.log(this.comm);
                    console.log("zmzmzmzmzm===================aaa");
                    axios.post("/comm/addComment", this.comm)
                        .then(resp => {
                            console.log(this.comm)
                            if (resp.data.message == "success") {
                                alert("添加成功");
                                window.location.reload();
                            }
                        })
                } else {
                    alert("请填写评论或者点击取消")
                }
            },
            addshoucang(){
                if (this.user === null) {
                    alert('请先登录！');
                    location.href = '../login.html';
                    return;
                }
                let productId = location.search;
                axios.post("/showcang/addsc" + productId)
                    .then(resp=>{
                        if (resp.data.message == "success") {
                            alert("添加成功");
                        }
                        if (resp.data.message == "errorByBoth"){
                            alert("请不要重复收藏")
                        }
                    })
            }
        }
    })
</script>
</body>
</html>